<template>
    <div class="madp-marketing-data">
        <div class="madp-title">
            <div class="name">
                <span>数据总览</span>
            </div>
            <el-select v-model="dataViewTime" placeholder="请选择" @change="changDataViewTime">
                <el-option label="近3日" value="0"> </el-option>
                <el-option label="近7日" value="1"> </el-option>
            </el-select>
        </div>
        <div class="data-overview">
            <div class="overview">
                <div :class="['item', showType == 1 ? 'is-active' : '']" @click="changeShowType(1)">
                    <span>访客人数</span>
                    <span>{{ viewData.visitorTotal | formatNum }}</span>
                </div>
                <div :class="['item', showType == 2 ? 'is-active' : '']" @click="changeShowType(2)">
                    <span>浏览次数</span>
                    <span>{{ viewData.browsesTotal | formatNum }}</span>
                </div>
            </div>
            <div>
                <echart-line-com chartId="dataOverView" :isUpdate.sync="isUpdateChart" :xData="xData" :seriesData="seriesData" />
            </div>
        </div>
        <div class="madp-title">
            <div class="name">
                <span>产品偏好</span>
                <span>（浏览次数）</span>
            </div>
            <el-select v-model="productTime" placeholder="请选择" @change="changeProductTime">
                <el-option label="近3日" value="0"> </el-option>
                <el-option label="近7日" value="1"> </el-option>
            </el-select>
        </div>
        <div class="product-preference">
            <echart-pie-com :isUpdate.sync="isUpdateChartPie" :seriesData="productPre" />
            <div class="product-list">
                <div class="item" v-for="(item, idx) in productPre" :key="idx">
                    <span :style="{ background: item.color }"></span>
                    <span>{{ item.name }}</span>
                    <span>{{ item.value }}</span>
                </div>
            </div>
        </div>
        <!-- <div class="madp-title">
      <div class="name">
        <span>资讯偏好</span>
      </div>
    </div> -->
    </div>
</template>
<script>
    import echartLineCom from '@/components/manager-view/enchart-line.vue';
    import echartPieCom from '@/components/manager-view/enchart-pie.vue';
    import managerViewApi from '@/api/manager-view.js';
    export default {
        components: { echartLineCom, echartPieCom },
        data() {
            return {
                isUpdateChart: false,
                isUpdateChartPie: false,
                dataViewTime: '0', // 数据总览时间周期
                productTime: '0', // 产品偏好 时间周期
                showType: 1, // 折线图展示数据总览的类型 1-访客人数 2-浏览次数
                visitorsData: {}, // 访客数据
                viewData: {}, // 浏览次数数据
                // 折线图显示数据
                xData: [],
                seriesData: [],
                productPre: [
                    { props: 'financial', value: 0, color: '#FEA62B', name: '理财' },
                    { props: 'fund', value: 0, color: '#8EC74D', name: '基金' },
                    { props: 'deposit', value: 0, color: '#EC5654', name: '存款' },
                    { props: 'loan', value: 0, color: '#3FA1FE', name: '贷款' },
                    { props: 'credit', value: 0, color: '#BE5FD6', name: '信用卡' }
                ]
            };
        },
        created() {
            this.changDataViewTime();
            this.getMarketingProdLike();
        },
        methods: {
            // 日期切换
            changDataViewTime() {
                this.getMarketingData();
            },
            changeProductTime() {
                this.getMarketingProdLike();
            },
            changeShowType(type) {
                if (this.showType == type) return;
                this.showType = type;
                this.getEchartData();
                this.isUpdateChart = true;
            },
            // 获取echart 需要的数据结构
            getEchartData() {
                this.xData = [];
                this.seriesData = [];
                this.viewData.tendencies.forEach((ele) => {
                    let time = ele.time.split('-');
                    this.xData.push(`${time[1]}/${time[2]}`);
                    if (this.showType == 1) {
                        this.seriesData.push(ele.visitorNumber);
                    } else {
                        this.seriesData.push(ele.browsesNumber);
                    }
                });
            },
            // 数据总览
            getMarketingData() {
                managerViewApi
                    .getMarketingData({
                        wxUserId: this.$store.state.vuex_wxUserId,
                        dateType: this.dataViewTime
                    })
                    .then((res) => {
                        this.viewData = res.data.data;
                        this.getEchartData();
                        this.isUpdateChart = true;
                    });
            },
            // 产品偏好数据
            getMarketingProdLike() {
                managerViewApi
                    .getMarketingProdLike({
                        wxUserId: this.$store.state.vuex_wxUserId,
                        dateType: this.productTime
                    })
                    .then((res) => {
                        let data = res.data.data;
                        this.productPre.forEach((ele) => {
                            ele.value = data[ele.props] || 0;
                        });
                        this.isUpdateChartPie = true;
                    });
            }
        }
    };
</script>
<style scoped lang="scss">
    .madp-marketing-data {
        .madp-title {
            margin-top: 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .name {
                font-size: 16px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #2c2c2c;
                :nth-child(2) {
                    color: rgba(44, 44, 44, 0.5);
                }
            }
            .el-select {
                width: 85px;
                /deep/.el-input__inner {
                    height: 30px;
                    line-height: 30px;
                    border-radius: 13px;
                    border: 1px solid rgba(44, 44, 44, 0.1);
                    font-size: 12px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #2c2c2c;
                }
                /deep/.el-input__icon {
                    line-height: 1;
                }
            }
            .el-input {
                width: 120px;
                margin-left: 50px;
                /deep/.el-input__inner {
                    height: 30px;
                    line-height: 30px;
                    border-radius: 13px;
                    border: 1px solid rgba(44, 44, 44, 0.1);
                    font-size: 12px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #2c2c2c;
                }
                /deep/.el-input__icon {
                    line-height: 1;
                }
            }
        }
        .data-overview {
            margin-top: 11px;
            .overview {
                display: flex;
                .item {
                    width: 50%;
                    height: 87px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    :nth-child(1) {
                        font-size: 14px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: rgba(32, 32, 32, 0.5);
                    }
                    :nth-child(2) {
                        margin-top: 4px;
                        font-size: 24px;
                        font-family: Roboto-Medium, Roboto;
                        font-weight: 500;
                        color: #202020;
                    }
                }
                .is-active {
                    background-image: url('../../assets/img/managerView/fangkerenshu_bg.png');
                    background-repeat: no-repeat;
                    background-size: cover;
                    box-shadow: 0px 3px 6px 0px rgba(181, 181, 181, 0.16);
                    span {
                        color: #ed5550 !important;
                        text-shadow: 0px 3px 6px rgba(181, 181, 181, 0.16);
                    }
                }
            }
        }
        .product-preference {
            .product-list {
                display: flex;
                flex-direction: column;
                .item {
                    padding-top: 19px;
                    padding-bottom: 15px;
                    display: flex;
                    align-items: center;
                    border-bottom: 1px solid #fafafa;
                    :nth-child(1) {
                        border-radius: 50%;
                        width: 6px;
                        height: 6px;
                    }
                    :nth-child(2) {
                        flex: 1;
                        margin-left: 10px;
                        font-size: 14px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: rgba(44, 44, 44, 0.8);
                    }
                    :nth-child(3) {
                        float: right;
                        font-size: 14px;
                        font-family: PingFangSC-Medium, PingFang SC;
                        font-weight: 500;
                        color: #2c2c2c;
                    }
                }
            }
        }
    }
</style>
